<template>
	<div class="container" :id="container" ref="chartRef"></div>
</template>

<script lang="ts" setup>
	import { markRaw, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
	import * as charts from 'echarts'
	import { pxToRem } from '@/utils/common'
	import { cloneDeep } from 'lodash'
	import { resetSize } from '@/utils/reset'
	// export default defineComponent({
	const props = defineProps({
		options: {
			type: Object,
			require: true,
		},
		width: {
			type: Number,
			require: false,
		},
		height: {
			type: Number,
			default: 200,
		},
		top: {
			type: Number,
			default: 0,
		},
		isFirst: {
			type: Boolean,
			default: false,
		},
		container: {
			type: String,
			default: 'container',
		},
	})
	const chartRef = ref()
	const Aecharts: any = reactive({ value: '' })
	const setAllSize = (obj: any) => {
		let keys = [
			'fontSize',
			'barWidth',
			'borderWidth',
			'barBorderRadius',
			'width',
			'height',
			'symbolSize',
			'itemHeight',
			'itemWidth',
			'lineHeight',
		]
		function findFields(obj: any) {
			for (let key in obj) {
				if (key == 'elements') {
					obj[key].forEach((item: any) => {
						if (typeof item.left == 'string') {
							let width = resetSize(item.style.width) as number
							item.left = (parseFloat(item.left) / 100) * chartRef.value.offsetWidth - width / 2
						}
					})
				}
				if (keys.includes(key)) {
					obj[key] = resetSize(obj[key])
				} else if (key == 'padding') {
					let padding = obj[key].map((item: any) => resetSize(item))
					obj[key] = padding
				} else if (key == 'offset' && Array.isArray(obj[key])) {
					console.log('offset', obj[key])
					let offset = obj[key].map((item: any) => resetSize(item))

					obj[key] = offset
				} else if (typeof obj[key] === 'object') {
					findFields(obj[key])
				}
			}
		}
		findFields(obj)
	}
	const changeEcharts = (options: any) => {
		let opt = cloneDeep(options)
		setAllSize(opt)
		Aecharts.value.setOption(opt)
		if (props.isFirst) {
			let index = 0
			Aecharts.value.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0,
			})
			Aecharts.value.on('mouseover', (e: any) => {
				if (e.dataIndex !== index) {
					Aecharts.value.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: index,
					})
				} else {
					Aecharts.value.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					})
				}
			})
			Aecharts.value.on('mouseout', (e: any) => {
				index = e.dataIndex
				Aecharts.value.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: e.dataIndex,
				})
			})
		}
	}

	watch(
		() => props.options,
		(newval: any) => {
			console.log("changeEcharts options is ", props.options)
			changeEcharts(newval)
		},
		{
			deep: true,
		},
	)

	watch(
		() => props.container,
		(newval: any) => {
			nextTick(() => {
				if (chartRef.value) {
					Aecharts.value = markRaw(charts.init(chartRef.value))
				}
				console.log("changeEcharts options is ", props.options)
				changeEcharts(props.options)
			})
		},
		{
			// deep: true,
			immediate: true,
		},
	)
	const Resize = () => {
		Aecharts.value.resize()
		changeEcharts(props.options)
	}

	onMounted(() => {
		chartRef.value.style.width = pxToRem(props.width!)
		chartRef.value.style.height = pxToRem(props.height!)
		window.addEventListener('resize', Resize)
	})
	onUnmounted(() => {
		window.removeEventListener('resize', Resize)
	})
</script>

<style lang="scss" scoped>
	.container {
		border-radius: 8px;
		justify-content: space-around;
	}
</style>
